@include('Admin.public.head')
<body>
@include('Admin.public.menu')
<!-- 引入样式 -->
<div class=" admin-content" id="app">
    <div class="daohang">

    </div>
    <!--充值模态框-->
    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-yen">充值记录</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">充值记录</a></dl>
            <!--这里打开的是新页面-->
        </div>
        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <ul>
                <li>
                    <template>
                        <el-select v-model="keyword.type" placeholder="货币类型">
                            <el-option
                                    size="medium"
                                    v-for="val,index in options"
                                    :key="index"
                                    :label="val.label"
                                    :value="val.value">
                            </el-option>
                        </el-select>
                    </template>
                </li>

                <li>
                    <div class="block">
                        <el-date-picker
                                v-model="keyword.dotime"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>

                <li>
                    <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
                </li>
                <li>
                    <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
                </li>
                {{--<li> <el-button type="success" ><a href="/admin/members/exportUser">导出</a></el-button></li>--}}
                <li> <el-button type="success" v-on:click="exportDetail()">导出</el-button></li>
                <li> <el-button type="danger" v-on:click="resetOrder()">重置</el-button></li>
            </ul>
        </div>

        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th>用户</th>
                    <th>电话</th>
                    <th>类型</th>
                    <th>总额</th>
                    <th>备注</th>
                    <th>操作人</th>
                    <th>时间</th>
                    <th>IP</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="val,index in RechargeList">
                   <td>@{{ val.user_name }}</td>
                   <td>@{{ val.name }}</td>
                    <td>
                        <span v-show="val.type == 1">购物积分 </span>
                        <span v-show="val.type == 2">奖金积分</span>
						<span v-show="val.type == 4">e+积分</span>
                      <span v-show="val.type == 5">复销积分</span>

                    </td>
                    <td>@{{ val.money }}</td>
                    <td>@{{ val.credit }}</td>
                    <td>@{{ val.operator }}</td>
                    <td>@{{ val.createtime }}</td>
                    <td>@{{ val.ip }}</td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page = "PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                        >
                    </el-pagination>
                </div>
            </ul>
			<div>
				积分充值总额:<span class="am-badge am-badge-danger am-radius">@{{ total }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
			</div>
        </form>

        <script type="text/javascript">

        </script>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
					total:'',
                    options: [{
                        value: 1,
                        label: '电子积分 '
                    },{
                        value: 5,
                        label: '复销积分'
                    },
					{
					    value: 2,
					    label: '奖励积分'
					}
					// ,{
     //                    value: 4,
     //                    label: '积分'
     //                },{
     //                    value: 5,
     //                    label: '代金券'
     //                },{
     //                    value: 6,
     //                    label: '启动金'
     //                }
                    ],

                    pickerOptions2: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                    RechargeList : [],//交易列表
                    PagesData:[],//分页
                    keyword:{ //关键字搜索
                        type:'',
                        dotime:'',
                        keyword:'',
                    }
                },
                //事件
                methods: {
                    //选择当前页
                    changeClick:function(e){
                        var rico = this
                        $.get("/admin/finance/doTransaction",{'_token':'{{csrf_token()}}',class:'rechargeList',page:e,keyword:app.keyword},function (res) {
                            if(res.code){
                                app.RechargeList = res.data.data
                                app.PagesData = res.data
								app.total = res.total
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },

                    initialize:function () {
                        var rico = this
                        //用户列表
                        $.get("/admin/finance/doTransaction",{'_token':'{{csrf_token()}}',class:'rechargeList'},function (res) {
                            if(res.code){
                                app.RechargeList = res.data.data
                                app.PagesData = res.data
                                console.log(  app.PagesData);
								app.total = res.total
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },

                    //重置
                    resetOrder:function(){
                        location.reload();
                    },
                    //导出
                    exportDetail:function () {
                        location.href="/admin/finance/exportDetail?type="+app.keyword.type+'&dotime='+app.keyword.dotime+'&keyword='+app.keyword.keyword+'&ClickType=2';
                    }

                },

                //自动执行
                mounted: function () {
                    this.initialize();
                },
            })
        </script>


@include('Admin.public.foot')